<template>
  <div class="warp">
    <div class="form-row">
      <div class="form-row-label">金额(￥)</div>
      <div class="form-row-content">
        <input class="input" type="number" v-model="formData.je" :step="2" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">销售数量</div>
      <div class="form-row-content">
        <input class="input" type="number" v-model="formData.sl" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">销售单位</div>
      <div class="form-row-content">
        <radio-group class="radio-group" name="dw" @change="radioChange">
          <label
                  class="radio"
                  v-for="(item, index) in items"
                  :key="'label-' + index"
          >
            <radio v-model="item.name" :checked="item.checked" />
            <text class="radio-text">{{ item.value }}</text>
          </label>
        </radio-group>
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">老人或者小孩</div>
      <div class="form-row-content">
        <radio-group class="radio-group" name="lr" @change="radioLr">
          <label
                  class="radio"
                  v-for="(item, index) in lr"
                  :key="'label-' + index"
          >
            <radio v-model="item.name" :checked="item.checked" />
            <text class="radio-text">{{ item.value }}</text>
          </label>
        </radio-group>
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">联系电话</div>
      <div class="form-row-content">
        <input
                class="input"
                type="text"
                v-model="formData.lxfs"
                :disabled="!lrflag"
        />
      </div>
    </div>
    <div class="form-row">
      <div class="form-row-label">订单说明</div>
      <div class="form-row-content">
        <input class="input" type="text" v-model="formData.wp" />
      </div>
    </div>
    <button
            class="button bs"
            type="primary"
            @click="saveData"
            :loading="saveLoading"
    >
      确认订单
    </button>
  </div>
</template>

<script>
  import store from "@/store/store";
  import { forEach, isEmpty } from "lodash";

  export default {
    computed: {
      companyId() {
        return store.state.companyId;
      }
    },
    data() {
      return {
        saveLoading: false,
        formData: {
          je: null,
          wp: null,
          sl: null,
          lxfs: null,
          dw: "箱"
        },
        items: [
          { name: "箱", value: "箱", checked: true },
          { name: "盒", value: "盒" }
        ],
        lrflag: false,
        lr: [
          { name: "是", value: "是" },
          { name: "否", value: "否", checked: true }
        ]
      };
    },
    methods: {
      bindViewTap() {
        const url = "/pages/logs/index";
        this.mpvue.navigateTo({ url });
      },
      radioChange(a) {
        this.formData.dw = a.mp.detail.value;
      },
      radioLr(a) {
        let str = a.mp.detail.value;
        if (str === "是") {
          this.lrflag = true;
        } else {
          this.lrflag = false;
        }
      },
      saveData() {
        if(this.lrflag){
          if (isEmpty(this.formData.lxfs)) {
            this.mpvue.alert({
              content: '如果是老人小孩或者没有支付宝必须填写一个联系方式！'
            })
            return
          }
        }
        if (isEmpty(this.formData.je)) {
          this.mpvue.alert({
            content: "请填写订单金额！"
          });
          return;
        }
        if (isEmpty(this.formData.sl)) {
          this.mpvue.alert({
            content: "请填写销售数量！"
          });
          return;
        }
        let url = "/pages/paySellers/index?";
        let arr = [];
        forEach(this.formData, (value, key) => {
          arr.push(key + "=" + value);
        });
        url += arr.join("&");
        this.mpvue.navigateTo({ url });
      }
    },

    mounted() {},
    onShow() {
      this.saveLoading = false;
      this.formData = {
        je: null,
        wp: null,
        sl: null,
        dw: "箱"
      };
    },
    onUnload() {
      this.saveLoading = false;
      this.formData = {
        je: null,
        wp: null,
        sl: null,
        dw: "箱"
      };
    },
    onPullDownRefresh() {
      // this.getData(() => {
      //   this.mpvue.stopPullDownRefresh()
      // })
    }
  };
</script>
<style scoped lang="scss">
  @import "../../common/common";

  div {
    box-sizing: border-box;
  }

  .bs {
    margin: 10px 0;
  }

  .warp {
    display: flex;
    background-color: #f3f3f3;
    height: 100vh;
    width: 100vw;
    padding: 20px 15px;
    flex-direction: column;
    box-sizing: border-box;

    .form-row {
      display: flex;
      align-items: center;
      color: rgb(51, 51, 51);
      height: 50px;
      background-color: #fff;
      padding: 6px 10px;
      border-bottom: 0.5px solid #f5f5f5;

      .form-row-label {
        width: 120px;
        margin-bottom: 1px;
        font-size: 16px;
        color: #7d7d7d;
      }

      .form-row-content {
        flex: 1;
        display: flex;
        font-size: 12px;

        .input {
          padding: 4px 8px 4px 0;
          font-size: 15px;
          flex: 1;
        }
        .input[disabled="true"] {
          background-color: #a0a0a0;
        }
      }
    }

    .hhd {
      background-color: rgba(221, 221, 221, 0.25);
      border: 1px solid #fff;
    }

    .cxso {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: cornflowerblue;
      font-size: 14px;
      background-color: #ffffff;
      margin-bottom: 1px;
      font-weight: bold;
    }
  }

  .radio {
    display: block;
    margin-bottom: 20px;
  }

  .radio-text {
    line-height: 1.8;
  }

  .radio-group {
    display: flex;
    align-items: center;

    label {
      margin: 2px 20px 0 0;
    }
  }

</style>
